<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vae</title>
  <link rel="stylesheet" href="__STATIC__/css/style.css">
  <link rel="stylesheet" href="__STATIC__/css/common.css">
  <link rel="stylesheet" href="__STATIC__/css/swiper-3.4.2.min.css">
</head>
<body>
  <div id="index">
    <!--导航-->
    <div class="head">
      <ul class="clearfix">
        <li>
          <img src="__STATIC__/img/logo.png" alt="logo">
        </li>
        <li class="active">
          <a href="">主页</a>
        </li>
        <li>
          <a href="">文章</a>
        </li>
        <li>
          <a href="">图片</a>
        </li>
        <li>
          <a href="">投稿</a>
        </li>
        <li>
          <a href="">关于我们</a>
        </li>
      </ul>
    </div>
    <!--轮播-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!--许嵩-->
    <div class="vae">
      <div class="slogan">
        <img src="__STATIC__/img/vae.png" alt="">
      </div>
      <!--专辑-->
      <div class="row album">
        <img src="__STATIC__/img/row_1.png" alt="">
        <div class="lists">
          <a class="list" v-for="(album,index) in albums" v-if="index<=4">
            <img :src="album.pic" alt="">
          </a>
        </div>
        <a href="">>>查看更多</a>
      </div>
      <!--美图-->
      <div class="row pic">
        <img src="__STATIC__/img/row_2.png" alt="">
        <div class="lists">
          <a class="list">
            <img src="__STATIC__/img/test.jpg" alt="">
          </a><a class="list">
          <img src="__STATIC__/img/test.jpg" alt="">
        </a><a class="list">
          <img src="__STATIC__/img/test.jpg" alt="">
        </a>
        </div>
        <a href="">>>查看更多</a>
      </div>
    </div>
  </div>

  <script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
  <script src="__STATIC__/js/swiper-3.4.2.min.js"></script>
  <script src="__STATIC__/js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#index',
      data: {
        albums:[],//专辑
      },
      created(){
        let self = this
        $.ajax({
          type: 'get',
          url: 'api/index/album',
          data: '',
          dataType: "json",
          success(res){
            self.albums = res.data.albumlist
          }
        });
      }
    })
  </script>
</body>
</html>